<script setup>
import "@material/web/button/text-button";
import Dialog from "@/components/MaterialDialog.vue";
import "@material/web/textfield/outlined-text-field.js";

const props = defineProps(["device"]);
const emit = defineEmits(["close"]);
</script>

<template>
  <Dialog :open="props.device != null" @close="$emit('close')">
    <template #headline>
      创建设备成功
    </template>

    <template #content>
      <form id="add-device-succeed-form" method="dialog" v-if="props.device != null">
        <p>设备名：{{ props.device.device.name }}</p>
        <p>设备证书：</p>
        <p>
          <md-filled-text-field readonly type="textarea" rows="3" :value="props.device.device.certificate">
          </md-filled-text-field>
        </p>
        <p>设备密钥：</p>
        <p>
          <md-filled-text-field readonly type="textarea" rows="3" :value="props.device.key_pair">
          </md-filled-text-field>
        </p>
      </form>
    </template>

    <template #actions>
      <md-text-button type="submit" form="add-device-succeed-form">确定</md-text-button>
    </template>
  </Dialog>
</template>

<style scoped>
#add-device-form>p {
  margin-bottom: 16px;
}

#add-device-form>p:last-child {
  margin-bottom: 0;
}

md-filled-text-field {
  resize: vertical;
}
</style>